/* CSS Document */

.doorContainer{ position:absolute;top: 0;}
.doorContainer .dConItem{}
.doorContainer .dConItem.indoorCon{ display:none;}
.doorContainer .dConItem.outdoorCon{ display:none;}
.dConItem >.topoIcon{position:absolute; z-index:2; width:60px; height:93px; text-align:center; color:#fff; font-size:16px; cursor:pointer; }
.dConItem .topoIcon1{ top:210px; left:547px;  background:url(../images/icon/topoIcon.png) bottom center no-repeat;}
.dConItem .topoIcon2{top:510px; left:547px;  background:url(../images/icon/topoIcon.png) bottom center no-repeat;}
.dConItem .topoIcon3{top:310px; left:780px;  background:url(../images/icon/topoIcon.png) bottom center no-repeat;}
.thermodynamics{ position:absolute; top:0; left:270px;z-index:1; background:url(../images/thermodynamics.png) 0 no-repeat; width:814px; height:865px;}
.firstCon{ position:absolute; top:0; left:150px; width:800px; height:930px; }


.cityShopIconBox{ position:absolute;/*width:900px; height:1000px;*/ left:50px;}
.cityShopIcon{ display:none;}
.cityIconF1{ position:absolute; background:url(../images/other/indoorMapF1.png) left top no-repeat; width:828px; height:826px; margin-left:100px;}
.cityIconF2{ position:absolute; background:url(../images/other/indoorMapF2.png) left top no-repeat; width:830px; height:828px; margin-left:100px;}
.cityIconF3{ position:absolute; background:url(../images/other/indoorMapF3.png) left top no-repeat; width:830px; height:828px; margin-left:100px;}
.cityIconF4{ position:absolute; background:url(../images/other/indoorMapF4.png) left top no-repeat; width:830px; height:828px; margin-left:100px;}


.cityShopList{ position:absolute; left:30px; top:90px; z-index:99;width:34px; height:203px;  border-radius:25px; border:1px solid #373942; background:#090a10; text-align: center;padding:3px;}
.cityShopList .closeCityShop{ display:inline-block; background: url(../images/icon/closeList.png) center no-repeat; width:34px; height:28px; cursor:pointer;}
.cityShopList .cirList{ display:inline-block; width:28px; height:28px; line-height:28px;  border-radius:25px; background:#5a5b5f; color:#5a5b5f; text-align:center; margin:14px auto 0; cursor:pointer;}
.cityShopList .cirList.cur{ background:#3399ff; color:#fff; }
.customerBox{ display:none; position:absolute; z-index:2;top:130px; left:170px; width:860px;/* height:684px;*/ background:rgba(22,25,35,.9); padding: 0 20px;}
.customerTit{ height:60px; line-height:60px; font-size:24px; color:#fff;}
.customerTit .closeIcon{ background:url(../images/icon/closeCon.png) center no-repeat; width:40px; height:40px; /*margin-top:18px;*/}
.customerTit .closeIcon:hover{
	background-color: #313C48
}
.customerCon{}
.customerSelecBox{ margin-bottom:30px;}
.custSeleItem{ float:left; width:25%;}
.custSeleTit{ font-size:14px; color:#fff; line-height:30px; margin-bottom:10px;}

.custSeleList .custSeleLi{ background:url(../images/icon/checkbox.png) left center no-repeat; padding-left:35px; font-size:14px; color:#8794b3; margin-bottom:20px;white-space: nowrap;overflow: hidden;}
.custSeleList .custSeleLi.selected{ background:url(../images/icon/checkboxSelect.png) left center no-repeat;}

.movementTracks .area,
.movementTracks .flowAreas,
.movementTracks .flow{
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
}
.movementTracks .area{
	transition: opacity .8s;
}
.movementTracks .area.show{
	opacity: 1;
}
.movementTracks .flow{
	pointer-events:none
}
.movementTracks .flowAreas{
	top: 154px;
	left: 145px;
	height: 752px;
	width: 814px;
	background: url(../images/movementTracks/area.png);
}
.movementTracks .area1{
	opacity: 0;
	top: 355px;
	left: 270px;
	width: 153px;
	height: 139px;
	background: url(../images/movementTracks/area1.png);
}
.movementTracks .flow1{
	top: 50%;
	left: 50%;
	margin-top: -394px;
	margin-left: -253px;
	width: 661px;
	height: 620px;
	background: url(../images/movementTracks/flow1.png);
}
.movementTracks .area2{
	opacity: 0;
	top: 102px;
	left: 429px;
	width: 153px;
	height: 190px;
	background: url(../images/movementTracks/area2.png);
}
.movementTracks .flow2{
	top: 50%;
	left: 50%;
	margin-top: -166px;
	margin-left: -325px;
	width: 561px;
	height: 559px;
	background: url(../images/movementTracks/flow2.png);
}


.onlineIndex .eventbox{
	position: absolute;
	font-size: 18px;
	color: #fff;
	width: 140px;
	height: 66px;
	background: #3399FF;
	border-radius: 5px;
	line-height: 66px;
	text-align: center;
	cursor: pointer;
	font-size: 14px;
}
.onlineIndex .e1{
	top: 190px;
	left: 400px;
	width: 120px;
	height: 70px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .e2{
	top: 100px;
	left: 783px;
	width: 160px;
	height: 60px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .e3{
	top: 432px;
	left: 212px;
	width: 160px;
	height: 60px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .e4{
	top: 811px;
	left: 71px;
	width: 120px;
	height: 60px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .e5{
	top: 113px;
	left: 0px;
	width: 160px;
	height: 60px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .e6{
	top: 815px;
	left: 367px;
	width: 120px;
	height: 60px;
	line-height: 18px;
	padding: 10px;
}
.onlineIndex .cityIcon1 .e1{top: 0px;left: 701px;}
.onlineIndex .cityIcon1 .e2{top: 80px;left: 240px;}
.onlineIndex .cityIcon1 .e3{top: 210px;left: 0px;}
.onlineIndex .cityIcon1 .e4{top: 260px;left: 705px;}
.onlineIndex .cityIcon1 .e5{top: 460px;left: 160px;}
.onlineIndex .cityIcon1 .e6{top: 530px;left: 710px;}
.onlineIndex .cityIcon1 .e7{top: 670px;left: 550px;}
.onlineIndex .cityIcon1 .e8{top: 700px;left: 40px;}
.onlineIndex .cityIcon2 .e1{top: 0px;left: 160px;}
.onlineIndex .cityIcon2 .e2{top: 0px;left: 701px;}
.onlineIndex .cityIcon2 .e3{top: 210px;left: 580px;}
.onlineIndex .cityIcon2 .e4{top: 430px;left: 110px;}
.onlineIndex .cityIcon2 .e5{top: 520px;left: 709px;}
.onlineIndex .cityIcon2 .e6{top: 620px;left: 520px;}
.onlineIndex .cityIcon2 .e7{top: 690px;left: 200px;}
.onlineIndex .cityIcon3 .e1{top: 50px;left: 360px;}
.onlineIndex .cityIcon3 .e2{top: 210px;left: 580px;}
.onlineIndex .cityIcon3 .e3{top: 250px;left: 50px;}
.onlineIndex .cityIcon3 .e4{top: 350px;left: 710px;}
.onlineIndex .cityIcon3 .e5{top: 450px;left: -20px;}
.onlineIndex .cityIcon3 .e6{top: 580px;left: 240px;}
.onlineIndex .cityIcon3 .e7{top: 680px;left: 620px;}
.onlineIndex .cityIcon3 .e8{top: 710px;left: 420px;}
.onlineIndex .eventbox:after{
	content: '';
	border: 8px solid transparent;
	border-top-color: #3399FF;
	position: absolute;
	bottom: -16px;
	left: 60px;
}
.onlineIndex .eventbox:before{
	content: '';
	width: 28px;
	height: 11px;
	background: url(../images/icon/wdot.png);
	position: absolute;
	bottom: -15px;
	left: 54px;
}

.hotDynamics,
.hotDynamics .hotrects,
.hotDynamics .rect{
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
}
.hotDynamics{
	width: 1920px;
	height: 1080px;
	background: url(../images/valueDistribution/grid.png);
}
.valueDistribution .hotrect2-1{
	top: 100px;
	left: 100px;
}
.valueDistribution .rect2-1-1{
	top: 0;
	left: 0;
	width: 699px;
	height: 643px;
	background: url(../images/valueDistribution/hotrect2-1-1.png);
}
.valueDistribution .rect2-1-2{
	top: 84px;
	left: 28px;
	width: 643px;
	height: 531px;
	background: url(../images/valueDistribution/hotrect2-1-2.png);
}
.valueDistribution .rect2-1-3{
	top: 140px;
	left: 56px;
	width: 587px;
	height: 447px;
	background: url(../images/valueDistribution/hotrect2-1-3.png);
}


.experienceHeatMap .hotrect3-1{
	top: 220px;
	left: 132px;
}
.experienceHeatMap .rect3-1-1{
	top: 0;
	left: 0;
	width: 643px;
	height: 643px;
	background: url(../images/experienceHeatMap/hotrect3-1-1.png);
}
.experienceHeatMap .rect3-1-2{
	top: 84px;
	left: 140px;
	width: 419px;
	height: 475px;
	background: url(../images/experienceHeatMap/hotrect3-1-2.png);
}
.experienceHeatMap .rect3-1-3{
	top: 168px;
	left: 196px;
	width: 335px;
	height: 363px;
	background: url(../images/experienceHeatMap/hotrect3-1-3.png);
}

.movementTracks .disList .disLi .cirLegIcon5{
	background-image: url(../images/common/cirLegIcon10.png);
}
.movementTracks .disList .disLi .cirLegIcon6{
	background-image: url(../images/common/cirLegIcon11.png);

}
.hotrects  .experience3{ left:100px; top:100px; background:url(../images/other/experience3.png) no-repeat;width:745px; height:762px;}

.custSeleList.generalCharts li{
	float: left;
	width:20%;
}

.thermodynamics.hotmap1{ background-image:url(../images/thermodynamics1.png);}